Step 1 - Use keyboard keys to navigate between Page nodes

In this step of the tutorial you create keyboard navigation between the Home, Media, Car, and Navigation application screens. You use triggers with JavaScript scripts to set which node receives the key input when the user presses a key on their keyboard.

Assets for the tutorial

The starting point of this tutorial is the Keyboard input.kzproj Kanzi Studio project file stored in <KanziWorkspace>/Tutorials/Keyboard input/Start directory.

The <KanziWorkspace>/Tutorials/Keyboard input/Completed directory contains the completed project of this tutorial.

The starting point project contains the content you need to complete this tutorial:

• The Page Host node Home shows the content on the Home application screen.
  • The Recent and Favorite nodes show the recent and favorite addresses on the Home application screen.
    
  • The HomeControls node positions the buttons users use to navigate between the Recent, Favorite, and AirCondition nodes.

    

  • The Page Host node AirCondition shows the content on the AirCondition application screen .
    • The Driver and Passenger nodes contain the sliders you use to set the air conditioning temperature on the AirCondition application screen.
      
• The Page node Media shows the Media application screen.
  
  
• The Page node Car contains a Grid List Box 2D node which shows the car settings on the Car application screen.
  
• The Page Host node Navigation shows the content on the Navigation application screen.
  • The Grid Layout 2D node positions:
    • The Navigation Grid List Box node which contains the address entries on the Navigation application screen.

    • The OpenMap node which users use to navigate to the Map application screen.

  
  

  • The Page node Map shows the Map application screen.
    • The Scroll View 2D node enables scrolling for the map on the Map application screen.
    • The Button 2D node CloseMap closes the Map screen of the application and navigates back to the Navigation application screen.

    

• The Toggle Button Group 2D node NavigationButtons contains the toggle buttons at the bottom of the application user interface, which users use to navigate between the Home, Media, Car, and AirCondition application screens.
  
  
• The Home node shows the content on the Home application screen.
  • The Recent and Favorite nodes show the recent and favorite addresses on the Home application screen.
    
  • The HomeControls node positions the buttons users use to navigate between the Recent, Favorite, and AirCondition on the Home application screen.

    

  • The AirCondition node shows the content on the AirCondition application screen.
    • The Driver and Passenger nodes contain the sliders you use to set the air conditioning temperature on the AirCondition screen.
      
• The Media node shows the Media application screen.
  
  
• The Car node contains a Grid List Box 2D node which shows the car settings on the Car application screen.
  
• The Navigation Page Host node shows the content on the Navigation application screen.
  • The Grid Layout 2D node positions:
    • The Navigation Grid List Box node which contains the address entries on the Navigation application screen.

    • The OpenMap node which users use to navigate to the Map application screen.

  
  

  • The Map Page node shows the Map application screen.
    • The Scroll View 2D node enables scrolling for the map on the Map applicatiopn screen.
    • The CloseMap Button 2D node closes the Map application screen and navigates back to the Navigation application screen.

    

• NavigationButtons node contains the toggle buttons at the bottom of the application user interface, which users use to navigate between the Home, Media, Car, and AirCondition application screens.
  
  
• The Screen node resource dictionary contains aliases for nodes in the project. Aliases provide a convenient way to access nodes from JavaScript scripts in the application.
  You can find the aliases in the Dictionaries window.
  To learn more about aliases and how to use them, see Using aliases.
  

Create keyboard navigation between application screens

In this section you create keyboard navigation for the toggle buttons you use to navigate between the Page nodes which show the application screens.

To create keyboard navigation between application screens:

1. In the Project select the Screen node, and in the Node Components right-click and select Add Trigger > Keyboard > Key Down to add the Key Down trigger. When you start the application, by default the focus is set to the Screen node.
   The Key Down trigger is set off when the user presses a specific key on their keyboard. You set which key sets off the trigger in step 3 of this section.
   

2. In the Node Components click Trigger Settings and in the Trigger Settings Editor click Add condition. The Trigger Condition Editor opens.
   Trigger conditions enable you to set which conditions must be met for the trigger to set off. Here you set the Key Down trigger to be set off when the user presses a specific key on the keyboard. You set which key sets off the trigger in the next step of this section.
   
   

3. In the Trigger Condition Editor set:
   • Value A
     • Value From to Message
       The Key Down trigger intercepts the messages generated when a user presses down a key on their keyboard. The message contains the key code which Kanzi uses to set off the trigger.
   • Operator to =
   • Value B
     • Value From to Fixed
     • Fixed Value to 64

   In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

   With this condition when the user presses down the → (Right Arrow) key, the Key Down trigger executes the actions you set in the trigger. For a list of the keyboard key codes used in Kanzi, see Keyboard input codes reference.
   

4. In the Node Components add to the Key Down trigger the Execute Script action.
   You set the application to execute a JavaScript script when the user presses the → (Right Arrow) key.
   
5. In the Execute Script window select + Create Script to create a new script.
   The Script Editor window opens.
   
6. In the Script Editor use this script:

   // Get the Page node Home.
   var homePage = node.lookupNode('#Home');
   // The value of the Page.State property tells whether the Page or Page Host node is active:
   // - If the value is 0, the node is inactive and invisible.
   // - If the value is 1, the node is active and visible.
   var homeActive = homePage.getProperty('Page.State');
   
   var mediaPage = node.lookupNode('#Media');
   var mediaButton = node.lookupNode('#MediaButton');
   var mediaActive = mediaPage.getProperty('Page.State');
   
   var carPage = node.lookupNode('#Car');
   var carButton = node.lookupNode('#CarButton');
   var carActive = carPage.getProperty('Page.State');
   
   var navigationPage = node.lookupNode('#Navigation');
   var navigationButton = node.lookupNode('#NavigationButton');
   var navigationActive = navigationPage.getProperty('Page.State');
   
   var screen = node.lookupNode('#Screen');
   
   // Check which application Page node is active and navigate to the next application.
   if (homeActive == 1)
   {
       // Navigate to the Media application screen.
       mediaPage.navigateToThisPage();
       // Set the Toggle State for the button of the next application to 1.
       // Toggle State Controller Property controls the state of these toggle buttons.
       mediaButton.setProperty('ButtonConcept.ToggleState', 1);
   }
   else if (mediaActive == 1)
   {
       carPage.navigateToThisPage();
       carButton.setProperty('ButtonConcept.ToggleState', 1);
   }
   else if (carActive == 1)
   {
       navigationPage.navigateToThisPage();
       navigationButton.setProperty('ButtonConcept.ToggleState', 1);
   }
   

   You use the script to set which Toggle Button node receives the keyboard input.
   To try this out in the Kanzi Studio Preview, click the Preview window to set the focus to the Preview window and press the → (Right Arrow) key on your keyboard to navigate between the Home, Media, Car, and Navigation application screens. When Kanzi activates each of the Page nodes, it sets the value of the Toggle State property of the Toggle Button which navigates to that Page to 1.
   

7. In the Project select the Screen node and in the Node Components click Add new trigger for Key Down.
   You use this trigger to navigate the application screens using the ← (Left Arrow) key.
   

8. In the Node Components click Trigger Settings and in the Trigger Settings Editor click Add condition.
   
   

9. In the Trigger Condition Editor set:
   • Value A
     • Value From to Message
       
   • Operator to =
   • Value B
     • Value From to Fixed
     • Fixed Value to 63

   In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

   With this condition when the user presses down the ← (Left Arrow) key, the Key Down trigger executes the actions you set in the trigger.
   

10. In the Node Components add to the Key Down trigger the Execute Script action.
    You set the application to execute a JavaScript script when the user presses the ← (Left Arrow) key.
    

11. In the Execute Script window select + Create Script to create a new script.
    The Script Editor window opens.
    You create a new script which Kanzi executes when the user presses the ← (Left Arrow) key on their keyboard.
    
12. Add In the Script Editor use this script:
    

    // Get the Page node Home.
    var homePage = node.lookupNode('#Home');
    // Get the NavigationButtons > Grid Layout 2D > HomeButton node.
    var homeButton = node.lookupNode('#HomeButton');
    // The value of the Page.State property tells whether the Page or Page Host node is active:
    // - If the value is 0, the node is inactive and invisible.
    // - If the value is 1, the node is active and visible.
    var homeActive = homePage.getProperty('Page.State');
    
    var mediaPage = node.lookupNode('#Media');
    var mediaButton = node.lookupNode('#MediaButton');
    var mediaActive = mediaPage.getProperty('Page.State');
    
    var carPage = node.lookupNode('#Car');
    var carButton = node.lookupNode('#CarButton');
    var carActive = carPage.getProperty('Page.State');
    
    var navigationPage = node.lookupNode('#Navigation');
    var navigationActive = navigationPage.getProperty('Page.State');
    
    var mapPage = node.lookupNode('#Map');
    var mapActive = mapPage.getProperty('Page.State');
    
    // Check which application Page node is active and navigate to the next application.
    if (navigationActive == 1 && mapActive != 1)
    {
        carPage.navigateToThisPage();
        // Set the Toggle State for the button of the next application to 1.
        // Toggle State Controller Property controls the state of these toggle buttons.
        carButton.setProperty('ButtonConcept.ToggleState', 1);
    }
    else if (carActive == 1)
    {
        mediaPage.navigateToThisPage();
        mediaButton.setProperty('ButtonConcept.ToggleState', 1);
    }
    else if (mediaActive == 1)
    {
        homePage.navigateToThisPage();
        homeButton.setProperty('ButtonConcept.ToggleState', 1);
    }
    

You can now use the → (Right Arrow) and ← (Left Arrow) keyboard keys to navigate between application screens.

Organize the script files in your Kanzi Studio project

In this section you rename the scripts you created in this step of the tutorial and create folders for those scripts.

To organize the script files in your Kanzi Studio project:

1. In the Library > Resource Files > Scripts select each script, press F2 and rename:
   • Script.js to NavigateRight.js
   • Script_1.js to NavigateLeft.js

   

2. In the Library > Resource Files press Alt and right-click Scripts, select Folder to create a folder, name it Screen, and drag the scripts to that folder.
   You use this folder to store those JavaScript scripts which you call on the Screen node.
   

See also

Tutorial: Create application flow with Page nodes

Using the Page and Page Host nodes

Using triggers

Keyboard input codes reference

Using scripts

Scripting reference

Open topic with navigation